<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.created_at"
        size="small"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        class="filter-item"
        :editable="false"
      />
      <el-select
        v-model="listQuery.status"
        size="small"
        placeholder="选择状态"
        clearable
        class="filter-item"
      >
        <el-option
          label="正常"
          :value="1"
        />
        <el-option
          label="禁用"
          :value="0"
        />
      </el-select>
      <el-input
        v-model="listQuery.keyword"
        size="small"
        placeholder="请输入关键词"
        clearable
        class="filter-item w-200"
      />
      <el-button-group class="filter-item">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >
          搜索
        </el-button>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-refresh"
          @click="refresh"
        >
          重置
        </el-button>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="add"
        >
          新增
        </el-button>
      </el-button-group>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      height="100%"
      class="table-container"
      highlight-current-row
    >
      <el-table-column
        fixed
        label="ID"
        width="80"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column
        label="用户名"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column
        label="真实姓名"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.truename }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="用户类型"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column
        label="邮箱"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column>
      <el-table-column
        label="IP地址"
        width="130"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.ip }}
        </template>
      </el-table-column>
      <el-table-column
        label="上次登录"
        width="160"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.last_time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="注册时间"
        width="160"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="80"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus($event, scope)"
          />
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="del(scope)"
            >
              删除
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'modify' ? '修改' : '新增'"
    >
      <el-form
        ref="dataForm"
        :model="temp"
        label-width="120px"
        label-position="right"
      >
        <el-form-item label="用户名">
          <el-input
            v-model="temp.username"
            placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input
            v-model="temp.truename"
            placeholder="请输入真实姓名"
          />
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input
            v-model="temp.email"
            placeholder="请输入电子邮箱"
          />
        </el-form-item>
        <el-form-item label="用户类型">
          <el-radio-group v-model="temp.type">
            <el-radio label="管理员">
              管理员
            </el-radio>
            <el-radio label="编辑">
              编辑
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户角色">
          <el-checkbox-group v-model="temp.role">
            <el-checkbox label="超级管理员" />
            <el-checkbox label="编辑人员" />
            <el-checkbox label="审核人员" />
            <el-checkbox label="客服人员" />
            <el-checkbox label="普通用户" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-radio-group v-model="temp.status">
            <el-radio :label="0">
              禁用
            </el-radio>
            <el-radio :label="1">
              正常
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="text-right">
        <el-button
          type="danger"
          @click="dialogVisible = false"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="submit"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { deepClone } from '@/utils'

const _temp = {
  id: '',
  username: '',
  truename: '',
  role: [],
  type: '管理员',
  email: '',
  status: 1
}

export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      list: [],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        created_at: undefined,
        status: undefined,
        keyword: undefined
      },
      temp: Object.assign({}, _temp),
      dialogVisible: false,
      dialogType: 'create',
      loading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    search() {
      this.fetchData()
    },
    refresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        created_at: undefined,
        status: undefined,
        keyword: undefined
      }
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      // getList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })

      let response = {"code":20000,"data":{"total":32,"items":[{"id":1,"username":"fttgvpk","truename":"程霞","type":"编辑","email":"y.ask@wdoeb.sm","role":["超级管理员"],"ip":"69.28.69.2","status":0,"last_time":"2010-07-22 09:17:00","created_at":"2005-11-30 14:56:26"},{"id":2,"username":"mpgccdf","truename":"于平","type":"编辑","email":"b.khkjus@lwghcwhz.mc","role":["超级管理员"],"ip":"102.202.68.117","status":1,"last_time":"1985-06-06 14:40:49","created_at":"1979-12-01 03:09:35"},{"id":3,"username":"qenkvuerdt","truename":"沈杰","type":"编辑","email":"j.zsyk@nduokj.cc","role":["超级管理员"],"ip":"56.49.192.112","status":1,"last_time":"1990-03-12 01:24:56","created_at":"1979-05-22 21:20:29"},{"id":4,"username":"cwdpdyyud","truename":"邓杰","type":"管理员","email":"p.qcspmyd@erttixvc.tt","role":["超级管理员"],"ip":"33.72.18.31","status":1,"last_time":"2001-04-03 07:51:23","created_at":"2021-01-08 23:54:44"},{"id":5,"username":"ustluv","truename":"于娜","type":"编辑","email":"a.swzfvc@gjhw.lv","role":["超级管理员"],"ip":"205.48.77.190","status":1,"last_time":"2013-08-23 00:29:43","created_at":"1978-10-02 09:25:48"},{"id":6,"username":"brsslysxs","truename":"萧娟","type":"编辑","email":"s.qek@uejxh.coop","role":["超级管理员"],"ip":"166.186.127.125","status":0,"last_time":"2017-01-31 09:22:43","created_at":"1985-04-27 22:27:06"},{"id":7,"username":"cttkkyrs","truename":"邵刚","type":"管理员","email":"f.pgqezf@xtwg.gd","role":["超级管理员"],"ip":"246.182.209.151","status":1,"last_time":"2011-07-26 15:32:27","created_at":"1992-07-22 20:06:02"},{"id":8,"username":"biheulv","truename":"戴丽","type":"编辑","email":"m.gmgo@orzfhwmbm.nz","role":["超级管理员"],"ip":"129.104.91.168","status":0,"last_time":"2004-03-12 16:29:13","created_at":"2007-01-05 10:52:15"},{"id":9,"username":"brcnpwbep","truename":"万桂英","type":"管理员","email":"u.kgmqsajl@jqt.mw","role":["超级管理员"],"ip":"225.80.77.168","status":1,"last_time":"1992-03-06 19:32:22","created_at":"1970-04-01 11:14:32"},{"id":10,"username":"fggpilbm","truename":"于艳","type":"管理员","email":"m.pzhppx@lkpjmrivkw.bd","role":["超级管理员"],"ip":"233.55.106.175","status":0,"last_time":"2002-07-20 04:53:26","created_at":"1970-08-04 07:59:16"},{"id":11,"username":"rdlgsxnnp","truename":"顾芳","type":"管理员","email":"p.pismklb@rrkvphub.fj","role":["超级管理员"],"ip":"75.5.153.220","status":0,"last_time":"1995-02-28 10:24:53","created_at":"2006-01-19 12:29:38"},{"id":12,"username":"qqsjfvx","truename":"韩涛","type":"管理员","email":"p.cbgoucvak@xoetij.pk","role":["超级管理员"],"ip":"67.124.86.140","status":0,"last_time":"2008-03-03 15:31:47","created_at":"1990-12-22 11:56:12"},{"id":13,"username":"hkgtncyne","truename":"邱军","type":"编辑","email":"o.mkqq@fbdjkk.uy","role":["超级管理员"],"ip":"89.141.101.138","status":0,"last_time":"1994-05-25 02:23:51","created_at":"2008-06-21 04:40:21"},{"id":14,"username":"dolweofa","truename":"罗勇","type":"编辑","email":"y.oosbmzkp@syyywem.nf","role":["超级管理员"],"ip":"229.52.214.66","status":0,"last_time":"2015-06-18 08:45:53","created_at":"2018-05-29 05:52:25"},{"id":15,"username":"hvbrwdxei","truename":"夏静","type":"管理员","email":"s.yccjc@vghgkfmo.ci","role":["超级管理员"],"ip":"134.40.216.148","status":0,"last_time":"1997-12-02 14:39:42","created_at":"1983-10-11 15:02:45"},{"id":16,"username":"gdoknioc","truename":"郑平","type":"编辑","email":"r.muvbii@xgjbiut.bo","role":["超级管理员"],"ip":"134.151.24.246","status":0,"last_time":"1995-03-23 02:10:59","created_at":"1976-04-09 04:37:12"},{"id":17,"username":"mswexhpvr","truename":"林强","type":"编辑","email":"b.ebttg@tafnjaxpbf.tj","role":["超级管理员"],"ip":"67.121.148.94","status":1,"last_time":"2016-02-28 12:39:19","created_at":"1998-07-28 23:48:16"},{"id":18,"username":"jqzuuyoimr","truename":"潘娟","type":"编辑","email":"m.ixqoltqu@cdgcg.ar","role":["超级管理员"],"ip":"112.196.35.133","status":0,"last_time":"2012-10-05 19:03:44","created_at":"1990-12-28 12:51:12"},{"id":19,"username":"ervhdlfml","truename":"郭杰","type":"管理员","email":"a.ddie@kwkso.fk","role":["超级管理员"],"ip":"59.204.248.238","status":0,"last_time":"1973-08-19 22:50:43","created_at":"1978-05-19 15:59:35"},{"id":20,"username":"xhbxllkoes","truename":"吴杰","type":"管理员","email":"h.hxrbdolrot@ixyvc.gm","role":["超级管理员"],"ip":"157.160.122.136","status":1,"last_time":"2010-09-07 07:45:34","created_at":"1970-10-14 14:05:21"}]}}
      this.list = response.data.items
      this.total = response.data.total
      this.listLoading = false
    },
    resetTemp() {
      this.temp = Object.assign({}, _temp)
    },
    add() {
      this.resetTemp()
      this.dialogVisible = true
      this.dialogType = 'create'
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    edit(scope) {
      this.resetTemp()
      this.dialogVisible = true
      this.dialogType = 'modify'
      this.temp = deepClone(scope.row)
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    changeStatus(value, scope) {
      setTimeout(() => {
        this.list[scope.$index].status = value
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      }, 300)
    },
    del(scope) {
      this.$confirm('确认删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setTimeout(() => {
          this.list.splice(scope.$index, 1)
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        }, 300)
      })
    },
    submit() {
      if (this.loading) {
        return
      }
      this.loading = true
      setTimeout(() => {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.loading = false
      }, 300)
    }
  }
}
</script>
